<template>
  <div class="question-star-item">
    <div class="header">{{info.title}}</div>
    <el-row class="user-info">
      <el-col :span="9">
        <img v-if="info.img" :src="info.img"/>
        <img v-else :src="`${$baseImgUrl}qa/noface.gif`"/>
      </el-col>
      <el-col :span="15" class="right">
        <h2 class="username">{{info.username}}</h2>
        <div class="level" :style="levelStyle"></div>
      </el-col>
    </el-row>
    <div class="bottom">
      回答数：<span>{{info.answerCount}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionStarItem',
  props: {
    info: {
      type: Object,
      default() {
        return {
          title: 'aaa',
          img: '',
          username: '李雷',
          level: 8,
          answerCount: 45,
          acceptCount: 12
        };
      }
    }
  },
  computed: {
    levelStyle() {
      return {
        background: `url('${this.$baseImgUrl}qa/level.png') no-repeat`,
        backgroundPosition: `0 ${-this.info.level * 12 - 1}px`
      };
    },
    acceptRate() {
      // eslint-disable-next-line no-mixed-operators
      return (this.info.acceptCount / this.info.answerCount * 100).toFixed(2);
    }
  }
};
</script>

<style lang="less" scoped>
  @import '../../../less/global.less';
  .question-star-item {
    margin-bottom: 10px;
    .header {
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-weight: bold;
      color: @mainBgColor;
      border-bottom: 1px dashed #ddd;
    }
    .user-info {
      margin-top: 10px;
      padding-left: 10px;
      img {
        width: 52px;
        height: 52px;
        border: 2px solid #ddd;
        border-radius: 5px;
      }
      .right {
        .username {
          margin: 0;
          font-weight: bold;
          font-size: 16px;
          color: #333;
        }
        .level {
          margin-top: 10px;
          width: 17px;
          height: 11px;
        }
      }
    }
    .bottom {
      margin: 5px 0 0 10px;
      color: #666;
      span {
        color: #f00;
        &:hover {
          color: @mainBgColor;
          cursor: pointer;
        }
      }
    }
  }
</style>
